import React, {useReducer, useEffect, useLayoutEffect} from 'react'
const countReducer = (state, action) => {
  switch(action.type) {
    case 'ADD': 
      return state + 1
    case 'INPUT': 
      return action.data
    default:
      return state
  }
}

function Demo2 () {
  const [count, dispatchCountAction] = useReducer(countReducer, 0)

  // useLayoutEffect(() => {
  //   console.log('useLayoutEffect mount')
  //   return () => {
  //     console.log('useLayoutEffect unmount')
  //   }
  // }, [count])

  // useEffect(() => {
  //   console.log('useEffect mount')
  //   return () => {
  //     console.log('useEffect unmount')
  //   }
  // }, [count])

  return <>
    <button onClick={() => dispatchCountAction({type: 'ADD'})}>加加加</button>
    <div>{count}</div>
    <input onChange={(e) => dispatchCountAction({type: 'INPUT', data: e.target.value})} />
  </>
}

export default Demo2